<script lang="ts" setup>
import { useTemplateRef, shallowRef, onUnmounted, inject } from 'vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/2/img-src.ts'
import { gsap } from 'gsap'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useWindowResize } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const contentRef = useTemplateRef<HTMLDivElement | null>('contentRef')
const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const gsapCtx = shallowRef<gsap.Context | null>(null)
const createAnimation = () => {
  if (!gsapCtx.value) {
    gsapCtx.value = gsap.context(() => {
      if (!contentRef.value) {
        return
      }

      const gridItem1 = contentRef.value.querySelector('& > div:nth-child(1)') as HTMLDivElement
      gsap.fromTo(
        contentRef.value,
        {
          x: 0,
        },
        {
          x: () => {
            return -(contentRef.value!.scrollWidth - gridItem1.clientWidth)
          },
          scrollTrigger: {
            trigger: contentRef.value,
            start: () => {
              return `top ${navBarHeight?.value ?? 48}`
            },
            end: () => {
              const v = contentRef.value!.scrollWidth - gridItem1.clientWidth
              return `+=${v} ${navBarHeight?.value ?? 48}`
            },
            pin: true,
            scrub: true,
            invalidateOnRefresh: true,
            ...scrollGroup,
          },
        },
      )
    })
  }
}
const delAnimation = () => {
  if (gsapCtx.value) {
    gsapCtx.value.revert()
    gsapCtx.value = null
  }
}

useWindowResize(async (w) => {
  if (w >= 1024) {
    createAnimation()
  } else {
    delAnimation()
  }
})

onUnmounted(delAnimation)

const itemData = [
  {
    picture: {
      360: getImgSrc('images-color-img-0-mo-1-95.jpg.webp'),
      640: getImgSrc('images-color-img-0-pad-1-95.jpg.webp'),
      1024: getImgSrc('images-color-img-0-d7111-95.jpg.webp'),
      1440: getImgSrc('images-color-img-0-1-95.jpg.webp'),
    },
    content: {
      p1: {
        top: '凝光星窗镜组',
        down: '透若琥珀 闪若星光',
      },
      p2: '经典方窗精妙对称，灵动星瞳清透优雅，定格采光留景的美好。一体式冷雕玻璃，底蕴通透浑然一体。',
    },
  },
  {
    picture: {
      360: getImgSrc('images-color-img-1-mo-1-95.jpg.webp'),
      640: getImgSrc('images-color-img-1-pad-1-95.jpg.webp'),
      1024: getImgSrc('images-color-img-1-d7111-95.jpg.webp'),
      1440: getImgSrc('images-color-img-1-1-95.jpg.webp'),
    },
    content: {
      p1: {
        top: '亲肤绒感玻璃',
        down: 'BabySkin 软糯触感',
      },
      p2: '晶钻玻璃工艺再升级，方寸之间打磨千万级微观晶体。如婴儿肌肤般纵享丝滑，触手温润，软糯亲肤。',
    },
  },
]
</script>

<template>
  <div class="item2_container">
    <div ref="contentRef" class="item2_content">
      <div v-for="(item, k) in itemData" :key="k" class="_grid-item">
        <picture class="lg:block lg:h-full lg:min-h-0 lg:w-full">
          <source :srcset="item.picture['1440']" media="(min-width: 1536px)" />
          <source :srcset="item.picture['1024']" media="(min-width: 1024px)" />
          <source :srcset="item.picture['640']" media="(min-width: 640px)" />
          <img
            class="sm:h-full lg:h-full lg:w-full object-cover"
            :src="item.picture['360']"
            alt=""
            loading="lazy"
          />
        </picture>

        <div class="text-content">
          <p class="text-3xl lg:text-[clamp(1.875rem,0.5864rem+2.0134vw,3rem)]">
            {{ item.content.p1.top }}
            <br />
            {{ item.content.p1.down }}
          </p>
          <p class="text-base max-sm:mt-[5.11vw] lg:text-[clamp(1rem,0.8568rem+0.2237vw,1.125rem)]">
            {{ item.content.p2 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.item2_container {
  overflow-x: hidden;
}

.item2_content {
  @apply grid
  sm:max-lg:grid-cols-1 sm:max-lg:grid-rows-2

  lg:auto-cols-[100vw] lg:grid-flow-col
  lg:grid-rows-[calc(100vh-var(--pc-second-nav-height))];

  ._grid-item {
    @apply grid sm:grid-cols-2;

    .text-content {
      @apply bg-[#f5f5f5] max-sm:pt-[6.6vw] max-sm:pb-[13.5vw] max-sm:px-[1rem]

      sm:grid sm:justify-center sm:content-center
      sm:max-lg:px-[clamp(1.25rem,-0.0605rem+3.2258vw,2rem)] sm:max-lg:gap-[clamp(0.9375rem,-0.0454rem+2.4194vw,1.5rem)]

      lg:pl-[clamp(2.5rem,1.0682rem+2.2371vw,3.75rem)]
      lg:grid-cols-[clamp(24.375rem,17.5025rem+10.7383vw,30.375rem)] lg:justify-start
      lg:gap-[clamp(1rem,0.4273rem+0.8949vw,1.5rem)];
    }
  }

  & > *:nth-child(2) {
    picture {
      @apply sm:max-lg:col-start-2 sm:max-lg:col-end-3 sm:row-span-full;
    }
    div.text-content {
      @apply sm:max-lg:col-start-1 sm:max-lg:col-end-2 sm:row-span-full;
    }
  }
}
</style>
